import { on } from '@/util/util'

/*
* trigger: 触发拖拽的手柄
* body：移动的目标
* recover：更新恢复到原来的位置
* v-draggable="{
                    trigger: '.drag-dialog .el-dialog__header',
                    body: '.drag-dialog.el-dialog',
                }"
* */

export default {
    inserted: (el, binding, vnode) => {
        let triggerDom = document.querySelector(binding.value.trigger)
        triggerDom.style.cursor = 'move'
        let bodyDom = document.querySelector(binding.value.body)
        let pageX = 0
        let pageY = 0
        let transformX = 0
        let transformY = 0
        let canMove = false

        const handleMousedown = e => {
            let transform = /\(.*\)/.exec(bodyDom.style.transform)
            if (transform) {
                transform = transform[0].slice(1, transform[0].length - 1)
                let splitxy = transform.split('px, ')
                transformX = parseFloat(splitxy[0])
                transformY = parseFloat(splitxy[1].split('px')[0])
            }
            pageX = e.pageX
            pageY = e.pageY
            canMove = true
        }

        function getTop(e){
            var offset=e.offsetTop;
            if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
            return offset;
        }

        const handleMousemove = e => {
            let xOffset = e.pageX - pageX + transformX
            let yOffset = e.pageY - pageY + transformY
            if (canMove) {
                bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
            }
        }
        const handleMouseup = e => {
            canMove = false
        }
        on(triggerDom, 'mousedown', handleMousedown)
        on(document, 'mousemove', handleMousemove)
        on(document, 'mouseup', handleMouseup)
    },
    update: (el, binding, vnode) => {
        if (!binding.value.recover) return
        let bodyDom = document.querySelector(binding.value.body)
        bodyDom.style.transform = ''
    }
}


